<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <!--公用头部-->
    <th:block th:replace="common/head::commonHead('用户-小邑')"/>
    <style>
        .layui-badge {
            height: 20px;
            line-height: 19px;
            box-sizing: border-box;
        }
        .layui-badge-gray {
            color: #8c8c8c;
            background: #fafafa;
            border: 1px solid #ccc;
        }

        #userTable + .layui-table-view .layui-table-body tbody > tr > td {
            padding: 0;
        }

        #userTable + .layui-table-view .layui-table-body tbody > tr > td > .layui-table-cell {
            height: 48px;
            line-height: 48px;
        }
        .tb-img-circle {
            width: 40px;
            height: 40px;
            cursor: zoom-in;
            border-radius: 50%;
            border: 2px solid #dddddd;
        }
    </style>
</head>
<!--公用js-->
<th:block th:replace="common/head::commonJs"/>
<body marginwidth="0" marginheight="0">
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" id="userForm">
                <div class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input id="username" name="username" autocomplete="off"
                                       class="layui-input" type="text"
                                       placeholder="请输入用户名"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline" id="sex">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input id="account" name="account" autocomplete="off"
                                       class="layui-input" type="text"
                                       placeholder="请输入账号"/>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="searchBtn"
                                    class="xy-btn xy-btn-primary icon-btn xy-btn-sm">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="userTable" lay-filter="userTable"></table>
            <!-- 表格操作工具栏 -->
            <script type="text/html" id="toolBar">
                <button  sec:authorize="hasPermission('/user/addUser','user:addUser')"  type="button" class="xy-btn xy-btn-primary xy-btn-sm" lay-event="add">
                    <i class="layui-icon">&#xe654;</i> 新增
                </button>
                <button sec:authorize="hasPermission('/user/deleteBatch','user:deleteBatch')"  type="button" class="xy-btn xy-btn-sm xy-btn-danger" lay-event="delete">
                    <i class="layui-icon">&#xe640;</i> 删除
                </button>
            </script>

            <!-- 数据行工具栏 -->
            <script type="text/html" id="lineBar">
                <a sec:authorize="hasPermission('/user/editUser','user:editUser')"  class="xy-btn xy-btn-xs" lay-event="edit">编辑</a>
                <a sec:authorize="hasPermission('/user/delete','user:delete')"  class="xy-btn xy-btn-danger xy-btn-xs" lay-event="del">删除</a>
                <a sec:authorize="hasPermission('/user/resetUser','user:resetUser')"  class="xy-btn xy-btn-xs xy-btn-warming" lay-event="reset">重置密码</a>
            </script>

            <script type="text/html" id="user-type-enable">
                <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="正常|锁定" lay-filter="user-type-enable" {{d.status=='0'?'checked':'' }}>
            </script>
        </div>
    </div>
</div>

<script>
    layui.use(['table', 'layer', 'jquery', 'form', 'util', 'notice', 'xmSelect'], function () {
        var layer = layui.layer
            , table = layui.table
            , form = layui.form
            , notice = layui.notice
            , xmSelect = layui.xmSelect
            , $ = layui.jquery
            , util = layui.util;
            util.fixbar({
                top: true //返回顶部
                , css: {right: 50, bottom: 50}
                , bgcolor: '#3b7cd8'
                , click: function (type) {
                }
            });
        /*性别下拉*/
        var sex = xmSelect.render({
            el: '#sex',
            tips: "性别",
            name:'sex',
            radio: true,
            clickClose: true,
            theme: {
                color: '#8799a3',
            },
            model: {
                icon: "hidden",
            },
            data: [
                {name: "男", value: "男"},
                {name: "女", value: "女"}
            ],
            on: function (data) {
            },
        });
        form.on('switch(user-type-enable)', function(obj) {
            sendAjaxPostToError(
                basePath + '/user/updateUser',
                {
                    id:this.value,
                    status:this.checked == true?0:1
                },
                function (result){
                    if (result.success == true){
                        top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                        tableIns.reload();
                    }else {
                        top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                    }
                },
                function (data) {
                    if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                        top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                    }else{
                        top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                    }
                }
            )
        });
        var tableIns = table.render({
            elem: '#userTable'
            ,method:'post'
            ,url: basePath + '/user/list' //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            ,cellMinWidth: 100
            ,cols: [ [ //表头
                {type: 'checkbox'}
                ,{field: 'headImg', title: '头像',align:"center",unresize: true,templet:function (d){
                    var url = basePath+"/static/admin/img/login/headImg.jpg";
                    if (utils.string.isEmpty(d.headImg)){
                        url = fjHttp+d.headImg;
                    }
                   return '<img data-index="' + (d.LAY_INDEX - 1) + '" src="' + url + '" class="tb-img-circle" tb-img alt=""/>';
                    }}
                ,{field: 'account', title: '账号',align:"center"}
                ,{field: 'username', title: '用户名',align:"center"}
                ,{field: 'birthday', title: '生日',align:"center",width: 120}
                ,{field: 'sex', title: '性别',align:"center",width: 80}
                ,{field: 'email', title: '邮箱',align:"center",width: 180}
                ,{field: 'phone', title: '手机号',align:"center"}
                ,{field: 'roleNames', title: '角色',align:"center", templet: function (d) {
                    var html="";
                    if (utils.string.isEmpty(d.roleNames)){
                        var roleArr = d.roleNames.split(",");
                        roleArr.forEach(function (item){
                            html+='<span class="layui-badge layui-badge-gray">' + item + '</span>';
                        });
                    }
                    return html;
                }}
                // ,{field: 'personalProfile', title: '个人简介',align:"center"}
                ,{field: 'createTime', title: '注册时间',align:"center",width: 160}
                ,{field: 'status', templet: '#user-type-enable', title: '状态',align:"center"}
                ,{fixed: 'right',width: 190,cellMinWidth: 190, align:'center', toolbar: '#lineBar',title:'操作'}
            ] ]
            ,limit: 10
            ,limits: [10, 20, 50, 100]
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: [  'prev', 'page', 'next', 'skip','count','limit'] //自定义分页布局
                , curr: 1 //设定初始在第 5 页
                , groups: 5 //只显示 1 个连续页码
                , first: false //不显示首页
                , last: false //不显示尾页
                , theme: "#1E9FFF"
            }
        });

        /* 点击图片放大 */
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            var imgList = table.cache['userTable'].map(function (d) {
                var url = basePath+"/static/admin/img/login/headImg.jpg";
                if (utils.string.isEmpty(d.headImg)){
                    url = fjHttp+d.headImg;
                }
                return {
                    alt: d.username,
                    src: url
                }
            });
            layer.photos({photos: {data: imgList, start: $(this).data('index')}, shade: .1, closeBtn: true});
        });
        // 监听头工具栏事件
        table.on('toolbar(userTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据

            if (obj.event === 'add') {
                // 新增数据
                layer.open({
                    type: 2,
                    title: "添加用户",
                    id: 'add_userId',
                    skin: 'layer-ext-myskin',
                    shadeClose: false,
                    shade: 0.3,
                    area: ["60%", "72%"],
                    content: basePath + '/view/system/user/user_add_update?type=1'
                });
            } else if (obj.event === 'delete') {
                // 批量删除
                if (checkStatus.data.length === 0) {
                    top.layui.notice.msg("未选择数据~" ,{icon: 3,position:"topCenter"});
                } else {
                    layer.confirm('确定要删除选中数据吗？', {icon: 5, title: '提示', skin: 'layer-ext-myskin'}, function (index) {
                        var ids = [];
                        $.each(data, function (index, element) {
                            ids.push(element.id);
                        });
                        layer.close(index);
                        // 异步请求
                        sendAjaxPostToError(
                            basePath + '/user/deleteBatch',
                            {ids: ids},
                            function (result) {
                                if (result.success) {
                                    top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                                    table.reload('userTable', {
                                        page: {curr: 1}
                                    });
                                } else {
                                    top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                                }
                            },
                            function (data) {
                                if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                    top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                                }else{
                                    top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                                }
                            }
                        )
                    });
                }
            }
        });
        //监听行工具事件
        table.on('tool(userTable)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'del') {
                // 单记录删除
                layer.confirm('确定要删除吗？', {icon: 5, title: '提示', skin: 'layer-ext-myskin'}, function (index) {
                    layer.close(index);
                    sendAjaxPostToError(
                        basePath + '/user/delete',
                        {id: data.id},
                        function (result) {
                            if (result.success) {
                                top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                                table.reload('userTable', {
                                    page: {curr: 1}
                                });
                            } else {
                                top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                            }
                        },
                        function (data) {
                            if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                            }else{
                                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                            }
                        }
                    )
                });
            } else if (layEvent === 'reset') {
                // 单记录删除
                layer.confirm('确定要重置密码吗？', {icon: 5, title: '提示', skin: 'layer-ext-myskin'}, function (index) {
                    layer.close(index);
                    sendAjaxPostToError(
                        basePath + '/user/resetUser',
                        {id: data.id},
                        function (result) {
                            if (result.success) {
                                top.layui.notice.msg(result.msg ,{icon: 1,position:"topCenter"});
                                table.reload('userTable', {
                                    page: {curr: 1}
                                });
                            } else {
                                top.layui.notice.msg(result.msg ,{icon: 2,position:"topCenter"});
                            }
                        },
                        function (data) {
                            if (utils.string.isEmpty(data) && utils.string.isEmpty(data.msg)){
                                top.layui.notice.msg(data.msg ,{icon: 2,position:"topCenter"});
                            }else{
                                top.layui.notice.msg("服务器内部错误，请联系管理员~", {icon: 2,position:"topCenter"});
                            }
                        }
                    )
                });
            }
            else if (layEvent === 'edit') {
                // 修改
                layer.open({
                    type: 2,
                    title: "修改数据",
                    shadeClose: false,
                    id: 'update_userId',
                    skin: 'layer-ext-myskin',
                    shade: 0.3,
                    area: ["60%", "72%"],
                    content: basePath + '/view/system/user/user_add_update?type=2&id=' + obj.data.id+'&roleIds='+obj.data.roleIds+'&sexName='+escape(obj.data.sex)
                });
            }
        });

        // 搜索
        $('#searchBtn').on('click', function () {
            tableIns.reload({
                where: getFormData('userForm')
            });
        });
    });
</script>
</body>
